<template>
  <div id="configGroup" class="common-sub-vertical-menu">
    <div class="header">
      <el-link type="primary" :underline="false" @click="handleCreate">新增分组</el-link>
    </div>
    <model-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="500px"
      @close="dialog.visible=!dialog.visible">
      <el-form ref="dataForm" :rules="recordRules" :model="recordForm" label-position="right" label-width="100px">
        <el-form-item label="所属上级" prop="pid">
          <el-select v-model="recordForm.pid" placeholder="请选择所属上级" style="width: 100%;">
            <el-option label="根目录" value="0" />
            <el-option
              v-for="item in groups"
              :key="item.id"
              :label="item.paramName"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="分组编号" prop="groupCode">
          <el-input v-model="recordForm.groupCode" maxlength="10" show-word-limit placeholder="请输入分组编号" />
        </el-form-item>
        <el-form-item label="分组名称" prop="groupName">
          <el-input v-model="recordForm.groupName" maxlength="20" show-word-limit placeholder="请输入分组名称" />
        </el-form-item>
        <el-form-item label="排序" prop="orders">
          <el-input-number v-model="recordForm.orders" placeholder="请输入分组排序" show-word-limit :max="99" style="width:100%" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="dialog.status==='create'?createData():updateData()">保存</el-button>
      </template>
    </model-dialog>
    <ul class="vertical-menu">
      <li v-for="item in groups" :key="item.paramCode" :class="item.id===selectedGroup.id?'active':''" @click="handleTabClick(item)">
        <span>{{ item.paramName }}</span>
        <span>
          <button-option icon="el-icon-edit" skin="primary" title="编辑" @click="handleUpdate(item)" />
          <button-option icon="el-icon-delete" skin="danger" title="删除" @click="handleRemove(item.id)" />
        </span>
      </li>
    </ul>
  </div>

</template>
<script>
export default {
  data() {
    return {
      groups: [],
      selectedGroup: {},
      dialogTitle: '',
      dialogVisible: false,
      dialog: {
        title: '',
        visible: false,
        status: 'create'
      },
      recordForm: {},
      recordRules: {
        groupCode: [
          { required: true, message: '请输入分组编号', trigger: 'blur' }
        ],
        groupName: [
          { required: true, message: '请输入分组名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadConfigGroup()
  },
  methods: {
    async loadConfigGroup() {
      const response = await this.$store.dispatch('loadConfigGroup')
      this.groups = response
      this.selectedGroup = this.groups[0]
      this.$emit('children', { group: { id: this.selectedGroup.id, name: this.selectedGroup.paramName }, children: this.selectedGroup.children ? this.selectedGroup.children : [] })
    },
    handleTabClick(row) {
      this.selectedGroup = row
      this.$emit('children', { group: { id: this.selectedGroup.id, name: this.selectedGroup.paramName }, children: this.selectedGroup.children ? this.selectedGroup.children : [] })
    },
    handleCreate() {
      this.dialog = {
        visible: true,
        status: 'create',
        title: '新增参数分组'
      }
      this.recordForm = {
        orders: 1
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$store.dispatch('systemConfigGroupSave', this.recordForm).then(response => {
            this.msgSuccess('保存成功')
            this.dialog.visible = false
            this.loadConfigGroup()
          }).catch(() => {
          })
        }
      })
    },
    handleUpdate(row) {
      this.recordForm = Object.assign({}, row)
      this.recordForm = {
        id: row.id,
        groupCode: row.paramCode,
        groupName: row.paramName,
        pid: row.pid,
        orders: row.orders
      }
      this.dialog = {
        status: 'update',
        title: '编辑参数分组',
        visible: true
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$store.dispatch('systemConfigGroupUpdate', this.recordForm).then(response => {
            this.msgSuccess('修改成功')
            this.dialog.visible = false
            this.loadConfigGroup()
          }).catch(() => {
          })
        }
      })
    },
    handleRemove(id) {
      this.$confirm('此操作将永久删除记录, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('systemConfigRemove', [id]).then(response => {
          this.msgSuccess('删除成功')
          this.loadConfigGroup()
        }).catch(() => {})
      }).catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
  #configGroup{
    padding-top: 0px;
    .header{
      height: 40px;
      line-height: 40px;
      text-align: right;
      padding-right: 10px;
      a{
        font-size: 12px;
      }

    }
    .vertical-menu{
      li{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-right: 10px;
      }
    }
  }
</style>
